<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅 </title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>

<body>
    <div class="nav">
        联机五⼦棋
    </div>
    <div class="container">
        <div>
            <div id="screen"></div>
            <button id="match-button">开始匹配</button>
        </div>
        <div>
            <button id="rank-button">查看玩家排名</button>
            <button id="ai-match-button">人机对战匹配</button>
            <ul id="rank-list" style="list-style-type: none; padding: 0;"></ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">
    </script>
    <script>
        $.ajax({
            type:"get",
            url:"/user/userInfo",
            success:function(result) {
                if(result == null) {
                    alert("当前账号有问题,请重新登入");
                    location.assign("login.html")
                }else {
                    let screen = document.querySelector("#screen");
                    screen.innerHTML = "玩家: " + result.username + "<br>" +
                        "分数: " + result.score + "<br>" +
                        "总场数: " + result.totalCount + "<br>" +
                        "胜场: " + result.winCount;
                }
            }
        });

        let webSocket = new WebSocket("ws://localhost:8080/findMatch");
        let matchbutton = document.querySelector("#match-button");
        let aiMatchButton = document.querySelector("#ai-match-button");
        matchbutton.onclick = function() {
            if(webSocket.readyState == webSocket.OPEN) {
                if(matchbutton.innerHTML == "开始匹配") {
                    console.log("开始匹配");
                    webSocket.send(JSON.stringify({
                        message:"开始匹配",
                    }));
                }else if(matchbutton.innerHTML == "匹配中...(点击取消)") {
                    console.log("取消匹配");
                    webSocket.send(JSON.stringify({
                        message:"停止匹配",
                    }))
                }else {
                    alert("连接中断,请重新登入");
                    location.assign("login.html");
                }

            }
        }
        aiMatchButton.onclick = function () {
            if (webSocket.readyState == webSocket.OPEN) {
                if (aiMatchButton.innerHTML == "人机对战匹配") {
                    console.log("开始人机对战匹配");
                    webSocket.send(JSON.stringify({
                        message:"人机对战匹配",
                    }));
                }
            }
        }
        function sleep(time){
            var timeStamp = new Date().getTime();
            var endTime = timeStamp + time;
            while(true){
                if (new Date().getTime() > endTime){
                    return;
                }
            }
        }

        webSocket.onmessage = function(result) {
            let resp = JSON.parse(result.data);
            if(!resp.ok) {
                console.log("resq:"+resp.message);
                console.log("错误:"+resp.error);
                alert("错误:"+resp.error);
                location.assign("login.html");
            }
            console.log(resp.message);
            if(resp.message == "开始匹配") {
                console.log("开始匹配");
                matchbutton.innerHTML = "匹配中...(点击取消)";
            }else if(resp.message == "停止匹配") {
                console.log("停止匹配");
                matchbutton.innerHTML = "开始匹配";
            }else if(resp.message == "匹配成功") {
                console.log("匹配成功");
                location.assign("game_room.html");
            }else if(resp.message == "AI匹配成功") {
                console.log("AI匹配成功");
                sleep(3000);
                location.assign("ai_room.html");
            }else {
                console.log("错误的message:"+resp.message);
            }
        }
        window.onbeforeunload = function() {
            webSocket.close();
        }

        let rankButton = document.querySelector("#rank-button");
        rankButton.onclick = function () {
            $.ajax({
                type: "get",
                url: "/user/rank",
                success: function (ranks) {
                    let rankList = document.querySelector("#rank-list");
                    rankList.innerHTML = "";
                    ranks.forEach(function (userRank) {
                        let listItem = document.createElement("li");
                        listItem.textContent = `排名: ${userRank.rank}, 用户名: ${userRank.username}, 分数: ${userRank.score}`;
                        rankList.appendChild(listItem);
                    });
                },
                error: function () {
                    alert("获取排名失败，请重试。");
                }
            });
        }
    </script>
</body>

</html>